<template>
  <div class="main">
    <img class="imgs"
    src="./assets/bg.jpg" alt="">
    <div id="app">
      <div class="nav">
        <!-- 头部 -->
        <Top></Top>
        <!-- 内容 -->
        <Conent></Conent>
        <!-- 底部 -->
        <Buttom></Buttom>
      </div>
    </div>
  </div>
</template>

<script>
  // @ is an alias to /src
  import Top from '@/components/Top.vue'
  import Buttom from '@/components/Buttom.vue'
  import Conent from '@/views/Conent.vue'

  export default {

    components: {
      Top,
      Buttom,
      Conent
    }
  }
</script>





<style lang="less" >
  .main {
    width: 100%;
    height: 100%;
    position: relative;

    .imgs {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 900px;
      filter: blur(80px);
    }

    #app {
      width: 1400px;
      position: relative;
      height: 600px;
      margin: 0 auto;
      margin-top: 50px;

      .nav {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>